<template>
  <el-container class="page-user">
    <el-aside style="width: 240px">
      <el-container>
        <el-header style="height: auto; display: block">
          <div class="user-info-top">
            <el-avatar :size="70" src="img/avatar.jpg"></el-avatar>
            <h2>张三</h2>
            <p>
              <el-tag effect="dark" round size="large" disable-transitions>超级管理员</el-tag>
            </p>
          </div>
        </el-header>
        <el-main class="nopadding">
          <el-menu class="menu" :default-active="page">
            <el-menu-item-group>
              <el-menu-item v-for="item in menus" :key="item.component" :index="item.component" @click="openPage(item)">
                <el-icon v-if="item.icon"><component :is="item.icon" /></el-icon>
                <template #title>
                  <span>{{ item.title }}</span>
                </template>
              </el-menu-item>
            </el-menu-item-group>
          </el-menu>
        </el-main>
      </el-container>
    </el-aside>
    <el-main>
      <template #default>
        <component :is="page" />
      </template>
      <template #fallback>
        <el-skeleton :rows="3" />
      </template>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue'
import { ref } from 'vue'
// 延迟组件
const account = defineAsyncComponent(() => import('./components/account.vue'))
const password = defineAsyncComponent(() => import('./components/password.vue'))
const page = ref<string>('account')
const menus = ref([
      {
        icon: 'el-icon-postcard',
        title: '账号信息',
        component: 'account'
      },
      {
        icon: 'el-icon-lock',
        title: '密码',
        component: 'password'
      },
])
const openPage = (item: any) => {
  page.value = (item as any).component
}
</script>
